﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义分页栏样式 */
        .layui-laypage {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

            .layui-laypage a,
            .layui-laypage span {
                margin: 0 5px;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #e2e2e2;
                border-radius: 3px;
                cursor: pointer;
            }

                .layui-laypage a:hover {
                    color: #009688;
                }

            .layui-laypage.layui-laypage-curr {
                background-color: #009688;
                color: #fff;
            }

        /* 新增的查询条件样式 */
        .layui-btn-container {
            display: flex;
            align-items: center;
        }

            .layui-btn-container input {
                margin-right: 10px;
            }

        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>

            <input type="text" style="width:230px;height:40px" name="titlearticle" placeholder="请输入标题名称" class="layui-input">
            <button class="layui-btn layui-btn-sm" lay-event="search">查询</button>
            <button class="layui-btn layui-btn-sm" lay-event="reset">重置</button>
        </div>
    </script>



    <script type="text/html" id="imageTpl">
        <img src="{{d.heaImage}}" alt="医生头像" style="max-width: 100px; max-height: 100px;">
    </script>

    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'jquery'], function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.jquery;

            // 表格渲染
            table.render({
                elem: '#test',
                url: '@ViewBag.BaseUrl/T5/HeaEncyclope',
                page: true,
                request: { pageName: 'pageIndex', limitName: 'pageSize' },
                limit: 8,
                limits: [5, 10, 15],
                toolbar: '#toolbarDemo',
                cellMinWidth: 80,
                totalRow: false,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'heaId', fixed: 'left', width: 100, title: 'ID', sort: true },
                    { field: 'titlearticle', width: 190, title: '文章标题' },
                    { field: 'heaImage', width: 190, title: '略缩图', templet: '#imageTpl' },
                    { field: 'superAffiliation', width: 190, title: '作者' },
                    { field: 'articlecontent', width: 190, title: '文章内容' },
                    {
                        field: 'deparstate',
                        width: 190,
                        title: '文章状态',
                        templet: function (d) {
                            return d.deparstate ? '已发布' : '未发布';
                        }
                    },
                    { field: 'heaTime', width: 180, title: '上传时间' },
                    { fixed: 'right', title: '操作', width: 184, minWidth: 125, templet: '#toolDemo' }
                ]],
                done: function (res, curr, count) {
                    // 修复下拉菜单重复渲染问题（原代码存在多个dropdown.render，这里根据需求保留必要功能）
                }
            });

            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                if (obj.event === 'getCheckData') {
                    var checkStatus = table.checkStatus(obj.config.id);
                    layer.alert(JSON.stringify(checkStatus.data, null, 2));
                } else if (obj.event === 'search') {
                    var titlearticle = $('[name="titlearticle"]').val();
                    table.reload('test', {
                        where: { titlearticle: titlearticle },
                        page: {
                            curr: 1 // 重置到第一页
                        }
                    });
                } else if (obj.event === 'reset') {
                    $('[name="titlearticle"]').val('');
                    table.reload('test', {
                        where: { titlearticle: '' },
                        page: {
                            curr: 1 // 重置到第一页
                        }
                    });
                }
            });

            // 优化后的分页处理（移除冗余的reload调用，Layui自动处理分页）
            table.on('page(test)', function (obj) {
                console.log('当前页：', obj.curr, '每页数量：', obj.limit);
            });
        });
    </script>
</body>

</html>    